import { useCallback, useState } from "react";
// @ts-ignore
import DatGui, {
  DatSelect,
  DatFolder,
  DatColor,
  DatNumber,
  DatBoolean,
  // @ts-ignore
} from "react-dat-gui";
import GpuCanvas from "../../components/GpuCanvas";
import "./index.css";
import { color, alpha, constant, clear, type Preset, kPresets, factors, operations } from "./defaultConfigs";
const settings: {
  alphaMode: GPUCanvasAlphaMode;
  textureSet: string;
  preset: Preset;
  color: GPUBlendComponent;
  alpha:  GPUBlendComponent;
  constant: {
    color: number[];
    alpha: number;
  }; 
  clear: {
    color: number[];
    alpha: number;
    premultiply: boolean;
  }
} = {
  alphaMode: "premultiplied",
  textureSet: "premultiplied alpha",
  preset: "premultiplied blend (source-over)",
  color,
  alpha,
  constant,
  clear,
};
export default function BlendingSample() {
  const appName = "Blending";
  const [dataSettings, setDataSettings] = useState(settings);
  const onUpdateData = useCallback((data: any) => {
    setDataSettings({ ...dataSettings, ...data });
  }, [dataSettings]);
  return (
    <>
      <GpuCanvas app={appName} data={dataSettings} />
      <DatGui data={dataSettings} onUpdate={onUpdateData}>
        <DatSelect
          path="alphaMode"
          label="canvas"
          options={["opaque", "premultiplied"]}
        ></DatSelect>
        <DatSelect
          path="textureSet"
          label="texture data"
          options={["premultiplied alpha", "un-premultiplied alpha"]}
        ></DatSelect>
        <DatSelect path="preset" options={kPresets} label="Preset" />
        <DatFolder title="color" closed={false}>
          <DatSelect
            path="color.operation"
            options={operations}
            label="operation"
          ></DatSelect>
          <DatSelect
            path="color.srcFactor"
            options={factors}
            label="srcFactor"
          ></DatSelect>
          <DatSelect
            path="color.dstFactor"
            options={factors}
            label="dstFactor"
          ></DatSelect>
        </DatFolder>
        <DatFolder title="alpha" closed={false}>
          <DatSelect
            path="alpha.operation"
            options={operations}
            label="operation"
          ></DatSelect>
          <DatSelect
            path="alpha.srcFactor"
            options={factors}
            label="srcFactor"
          ></DatSelect>
          <DatSelect
            path="alpha.dstFactor"
            options={factors}
            label="dstFactor"
          ></DatSelect>
        </DatFolder>
        <DatFolder title="constant" closed={false}>
          <DatColor path="constant.color" label="color" data={constant.color} />
          <DatNumber
            path="constant.alpha"
            label="alpha"
            data={constant.alpha}
            min={0}
            max={1}
            step={0.01}
          />
        </DatFolder>
        <DatFolder title="clear color" closed={false}>
          <DatNumber
            path="clear.alpha"
            label="alpha"
            data={clear.alpha}
            min={0}
            max={1}
            step={0.01}
          />
          <DatBoolean
            path="clear.premultiply"
            data={clear.premultiply}
            label="premultiply"
          ></DatBoolean>
          <DatColor path="clear.color" label="color" data={clear.color} />
        </DatFolder>
      </DatGui>
    </>
  );
}
